<template>
  <view class="page-container">
    <view class="bottom-10">
      <view class="content" v-for="(item,index) in baseList" :key="index" @click="handleToDetail(item)">
        <view class="flex-row">
          <view class="flex-column">
            <text>{{ item.remark }}</text>
            <view class="marginTop10">
              <text class="time">{{ item.createTime }}</text>
              <text class="time time-left" @click="handlePaste(item.num)">订单号：{{ item.numTemp }}</text>
            </view>
          </view>
          <view class="flex-column flex-column-center">
            <text class="red small" v-if="item.state==='2'">已拒绝</text>
            <text class="red ">￥{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>

    <u-loadmore :status="status" @loadmore="loadMore"/>
    <u-popup :show="poupShow" @close="closeDialog" mode="center" :round="10" :customStyle="poupStyle">
      <view class="poup-content">
        <view class="avatar">
          <u-avatar :src="poupDetail.userAvatarFrom"></u-avatar>
        </view>

        <text class="name">飞天揽月</text>
        <view class="vip-container">
          <image
              src="http://211.149.139.63:8080/profile/upload/2023/02/13/vip买家秀_20230213161311A002.png"
              mode="scaleToFill"
              style="width: 15px; height: 15px"></image>
          <text style="color: brown; font-size: 0.5rem;margin-left:0.5rem">vip会员</text>
        </view>
        <view class="detail">
          <text>{{ poupDetail.remark }}</text>
          <text>金额：￥{{ poupDetail.price }}</text>
          <text>日期:{{ poupDetail.createTime }}</text>
          <text  @click="handlePaste(poupDetail.num)">订单号：{{ poupDetail.numTemp }}</text>
        </view>

        <u-button type="error" text="确认关闭" @click="closeDialog"></u-button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {isEmptyArray, isEmptyString} from "@/utils/common";
import {getStorage} from "@/utils/auth";
import application from "@/static/const/application";
import {copyToClipboard} from "@/utils/uniappTools";
import config from "@/config";

export default {
  data() {
    return {
      baseList: [],
      status: 'loadmore',
      params: {
        userId: 1,
        current: 1,
        size: 10
      },
      poupShow: false,
      poupDetail: {},
      poupStyle: {
        width: "20rem",
        height: "auto",
        padding: "0 0 0 0",
        borderRadius: "10px",
        backgroundColor: "#FFFFFF",
      },
      src: 'http://211.149.139.63:8080/profile/upload/2023/02/13/vip买家秀_20230213161311A002.png'

    };
  },
  onLoad(options) {
    this.params.userId = getStorage(application.user).userId
    this.getList();
  },
  methods: {
    getList() {
      this.params.current = 1;
      this.$store
          .dispatch("GetIncomeRecordList", this.params)
          .then((res) => {
            this.baseList = res.data.records;
            if (!isEmptyArray(this.baseList)) {
              this.baseList.forEach((item, index) => {
                //时间只取年月日
                item.createTime = item.createTime.substring(0, 10)
                item.numTemp = item.num.substring(0, 4) + '****' + item.num.substring(item.num.length - 4, item.num.length)
              })
            }
            if (res.data.total <= this.baseList.length) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
            }
          });
    },
    toDetail(item) {
      //将item.id存入到state中
      uni.redirectTo({
        url: '/pages/invite/posterShare/index?id=' + item.id
      })
    },
    handlePaste(num) {
      copyToClipboard(num);
    },
    handleToDetail(item) {
      this.$store.dispatch("GetIncomeRecordDetail", item.id).then((res) => {
        console.log(res)
        this.poupDetail = res.data;
        if (!isEmptyString(this.poupDetail.createTime)) {
          this.poupDetail.createTime = this.poupDetail.createTime.substring(0, 10);
        }
        if (!isEmptyString(this.poupDetail.userAvatarFrom)) {
          this.poupDetail.userAvatarFrom = config.baseUrl + this.poupDetail.userAvatarFrom;
        }
        if (!isEmptyString(this.poupDetail.num)) {
          this.poupDetail.numTemp = this.poupDetail.num.substring(0, 4) + '****' +
              this.poupDetail.num.substring(this.poupDetail.num.length - 4, this.poupDetail.num.length)
        }
        this.poupShow = true;
      });

    },
    closeDialog() {
      this.poupShow = false;
      this.poupDetail = {};
    },
    loadMore() {
      this.status = 'loading';
      this.params.current++;
      this.$store
          .dispatch("GetIncomeRecordList", this.params)
          .then((res) => {
            let tempArr = res.data.records;
            if (!isEmptyArray(tempArr)) {
              tempArr.forEach((item, index) => {
                //时间只取年月日
                item.createTime = item.createTime.substring(0, 10)
                item.numTemp = item.num.substring(0, 4) + '****' + item.num.substring(item.num.length - 4, item.num.length)
              })
            }
            this.baseList = this.baseList.concat(tempArr);
            if (res.data.total <= this.baseList.length) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
            }
          });

    },
  },
};
</script>
<style scoped lang="scss">
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 5rem;

  .bottom-10 {
    margin-bottom: 2rem;
    padding-top: 1rem;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    padding: 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
    margin-bottom: 1rem;

    .flex-row {
      justify-content: space-between;

      .flex-column {
        display: flex;
        flex-direction: column;

        text {
          font-size: 14px;
          color: #333333;
        }

        .time {
          font-size: 10px;
          color: #999999;
        }

        .red {
          color: #e43d33;
          font-weight: bold;
        }

        .small {
          font-size: 12px;
          font-weight: normal;
        }
      }

      .flex-column-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .marginTop10 {
      margin-top: 10px;

      .time-left {
        margin-left: 10px;
      }
    }
  }

  .poup-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 3rem 3rem;

    .avatar {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      margin-right: 0.5rem;
      background-color: #c0c0c0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -2rem;
      left: 40%;
    }

    .vip-container {
      border: 1px solid #e43d33;
      padding: 0.25rem 1rem;
      border-radius: 50px;
      margin-top: 0.25rem;
    }

    .detail {
      display: flex;
      flex-direction: column;
      margin-top: 1rem;
      margin-bottom: 1rem;

      text {
        margin-bottom: 0.5rem;
      }
    }
  }
}
</style>
